<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        车名: <input v-model="carInfo.brand" type="text">
        型号: <input v-model="carInfo.series" type="text">
        生产日期: <input v-model="carInfo.creation" type="text">
        <ul>
            <li v-for="(item , index) in carArr" v-show="item.bool">
                <p>车名: {{item.brand}}</p>
                <p>型号: {{item.series}}</p>
                <p>生产日期: {{item.creation}}</p>
            </li>
        </ul>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                carInfo: {
                    brand: '',
                    series: '',
                    creation: ''
                },
                carArr: [
                    {
                        brand: "奥迪",
                        series: "奥迪A4",
                        bool: true,
                        creation: "2021"
                    },
                    {
                        brand: "奥迪",
                        series: "奥迪A6",
                        bool: true,
                        creation: "2021"
                    },
                    {
                        brand: "奥迪",
                        series: "奥迪A6",
                        bool: true,
                        creation: "2020"
                    },
                    {
                        brand: "奥迪",
                        series: "奥迪A8",
                        bool: true,
                        creation: "2020"
                    },
                    {
                        brand: "奥迪",
                        series: "奥迪A3",
                        bool: true,
                        creation: "2019"
                    },
                    {
                        brand: "奥迪",
                        series: "奥迪A4L",
                        bool: true,
                        creation: "2020"
                    },
                    {
                        brand: "奥迪",
                        series: "奥迪A6",
                        bool: true,
                        creation: "2018"
                    },
                    {
                        brand: "奔驰",
                        series: "奔驰A级",
                        bool: true,
                        creation: "2019"
                    },
                    {
                        brand: "奔驰",
                        series: "奔驰C级",
                        bool: true,
                        creation: "2020"
                    },
                    {
                        brand: "奔驰",
                        series: "奔驰E级",
                        bool: true,
                        creation: "2019"
                    },
                    {
                        brand: "奔驰",
                        series: "奔驰E级",
                        bool: true,
                        creation: "2021"
                    }
                ]
            },
            watch: {
                carInfo: {
                    deep: true,
                    handler(newValue, oldValue) {
                        this.carArr.forEach((item) => {
                            // 1,  
                            if (item.brand === newValue.brand) {
                                item.bool = true
                                // 2
                                if (item.series === newValue.series) {
                                    item.bool = true
                                    // 3
                                    if (item.creation === newValue.creation) {
                                        item.bool = true
                                    }
                                    else if (newValue.creation === '') {
                                        item.bool = true
                                    }
                                    else {
                                        item.bool = false
                                    }
                                }
                                else if (newValue.series === '') {
                                    item.bool = true
                                }
                                else {
                                    item.bool = false
                                }
                            }
                            else if (newValue.brand === '') {
                                item.bool = true
                            }
                            else {
                                item.bool = false
                            }

                        })
                    }
                }
            }
        })
    </script>
</body>

</html>